<template>
  <el-card>
    <!-- 视频监控 -->
    <bread-crumb slot="header">
      <template slot="title">视频监控</template>
    </bread-crumb>
        <div class="videoContainer">
          <!-- 播放列表 -->
          <div class="Playlist">
            <el-tabs v-model="activeName" @tab-click="handleClick" type="card" >
              <el-tab-pane label="直播" name="first">
              </el-tab-pane>
              <el-tab-pane label="录播" name="second"></el-tab-pane>
            </el-tabs>
          </div>
          <!-- 播放器 -->
          <div class="Players">
            <video controls="controls" id="movie" src="https://v1.kwaicdn.com/upic/2021/09/10/22/BMjAyMTA5MTAyMjA0NTdfMTg4OTE4MjM1OV81NjkzNjcyNTYxMF8xXzM=_b_Baddcd3d1aa999cf2909e0f2390a582a0.mp4?pkey=AAXjSvw7BQhVLaY_ref-fQaQ0Mv2hg9r4CEeDY-6D6kIC5ptTgoQ1vzRQoahXU21wlPUdlOyBS_XAdAxs5pXd4wUcWRX62p4VNv0s8cV8D7qPi-rw5bu0INsMeGjnHt-y5Y&tag=1-1634410031-xpcwebdetail-0-aweo9smarf-9a94392ff48ab942&clientCacheKey=3xshrguhq6cj9fu_b.mp4&tt=b&di=78f5148a&bp=10004" width="100%" height="100%"></video>
          </div>
        </div>
  </el-card>
</template>

<script>
export default {
  data () {
    return {
      activeName: 'first',
      videoMonitoring: false,
      InstitutionalName: '',
      found: '',
      ExpiryDate: '',
      organizerTyle: '',
      situationsaType: '',
      situationsa: '',
      exportBounced: false,
      advancedSearch: false,
      tableData: [
        {
          licence: '2016-05-03', // 2
          Licenceissued: '2016-05-03', // 3
          Institutional: '王小虎', // 1
          InstitutionalType: '上海市普陀区金沙江路 1518 弄',
          Organizers: '厉害陈', // 4
          Principal: '鎏光' // 5
        },
        {
          licence: '2016-05-02',
          Licenceissued: '2016-05-02',
          Institutional: '王小虎',
          InstitutionalType: '上海市普陀区金沙江路 1518 弄',
          Organizers: '厉害陈',
          Principal: '鎏光'
        },
        {
          licence: '2016-05-04',
          Licenceissued: '2016-05-04',
          Institutional: '王小虎',
          InstitutionalType: '上海市普陀区金沙江路 1518 弄',
          Organizers: '厉害陈',
          Principal: '鎏光'
        },
        {
          licence: '2016-05-01',
          Licenceissued: '2016-05-01',
          Institutional: '王小虎',
          InstitutionalType: '上海市普陀区金沙江路 1518 弄',
          Organizers: '厉害陈',
          Principal: '鎏光'
        },
        {
          licence: '2016-05-08',
          Licenceissued: '2016-05-08',
          Institutional: '王小虎',
          InstitutionalType: '上海市普陀区金沙江路 1518 弄',
          Organizers: '厉害陈',
          Principal: '鎏光'
        },
        {
          licence: '2016-05-06',
          Licenceissued: '2016-05-06',
          Institutional: '王小虎',
          InstitutionalType: '上海市普陀区金沙江路 1518 弄',
          Organizers: '厉害陈',
          Principal: '鎏光'
        },
        {
          licence: '2016-05-07',
          Licenceissued: '2016-05-07',
          Institutional: '王小虎',
          InstitutionalType: '上海市普陀区金沙江路 1518 弄',
          Organizers: '厉害陈',
          Principal: '鎏光'
        }
      ],
      multipleSelection: [],
      options: [
        {
          value: 'organization',
          label: '机构名称'
        },
        {
          value: 'principal',
          label: '校长'
        },
        {
          value: 'Organizers',
          label: '举办者'
        }
      ],
      dizhi: [
        '杭州市',
        '上城区',
        '下城区',
        '江干区',
        '拱墅区',
        '西湖区',
        '滨江区',
        '萧山区',
        '余杭区',
        '桐庐县',
        '淳安县',
        '建德市',
        '富阳区',
        '临安区', '滨江区',
        '萧山区',
        '余杭区',
        '桐庐县',
        '淳安县',
        '建德市',
        '富阳区',
        '临安区',
        '钱塘新区'
      ],
      searchContent: '',
      select: 'organization',
      page: {
        // 分页数据
        total: 1000, // 总条数
        currentPage: 1, // 默认的页码 是第一个页  决定了当前页码是第几页
        pageSize: 9 // page-size的默认值是10条
      }
    }
  },
  watch: {
    videoMonitoring (val) {
      if (val === false) {
        this.toggleSound()
      }
    }
  },
  methods: {
    deles (index, data) {
      console.log(index)
      console.log(data)
    },
    toggleSound () {
      var video = document.getElementById('movie')
      if (video.paused) { // 如果已暂停则播放
        video.play() // 播放控制
      } else { // 已播放点击则暂停
        video.pause() // 暂停控制
      }
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.page.pageSize = val
      console.log(this.page.pageSize)
    },
    // 当前页发生改变时触发
    changePage (newPage) {
      this.page.currentPage = newPage
    },
    // 监控视频
    deleteRow (index, rows) {
      this.videoMonitoring = true
      console.log('索引', index)
      console.log('数组', rows)
    },
    // 当选择项发生变化时会触发该事件
    handleSelectionChange (val) {
      console.log('我选择了')
      console.log(val)
      this.multipleSelection = val
    }
  }
}
</script>

<style lang="less" scoped>
  .videoContainer {
    height: 100vh - 15%;
    display: flex;
    // margin-top: -10px;
    overflow: hidden;

    .Players {
      width: 100%;
    }

    .Playlist {
      // width: 227px;
      border: 1px solid #E4E7ED;
    }

  }</style>
